<template>
  <div class="home">
    <img
      class="logo"
      alt="Vue logo"
      src="../assets/logo.png"
      @click="dialogVisible = !dialogVisible"
    />
    <m-dialog v-if="dialogVisible" @closeDialog="dialogVisible = false" />
    <HelloWorld :msg="items.length + 'message 长度献之'" />
    <!-- 按扭 -->
    <van-row>
      <van-col span="6">
        <van-button type="primary">异步组件加载</van-button>
      </van-col>
      <van-col span="6">
        <van-button type="info">信息按钮</van-button>
      </van-col>
      <van-col span="6"> <van-button type="default">默认按钮</van-button></van-col>
      <van-col span="6"> <van-button type="danger">危险按钮</van-button></van-col>
    </van-row>
  </div>
</template>

<script>
// @ is an alias to /src
//组件懒加载
const HelloWorld = () => import(/* webpackChunkName: "helloworld" */ '@/components/HelloWorld.vue');
// import HelloWorld from "@/components/HelloWorld.vue";
// 引入并使用
import { targetType, expmale_base64 } from '@/utils/utils.js';

//组件懒加载
const MDialog = () => import(/* webpackChunkName: "dialogInfo" */ '@/components/Dialog.vue');
export default {
  name: 'Home',
  components: {
    HelloWorld,
    MDialog,
  },
  data() {
    return {
      dialogVisible: false,
      items: [],
      msg: '',
    };
  },
  created() {
    setTimeout(() => {
      this.longTimerFn();
      this.longTimerFnlongTimerFnlongTimerFn();
    }, 100);
  },
  mounted() {
    targetType(null);
    console.log(
      '%c Line:30 🥒 targetType',
      'font-size:18px;color:#ffffff;background:#c23616',
      targetType,
    );
    expmale_base64();
    this.init();
  },
  methods: {
    init() {
      const fn_babel = () => 1;
      const msg = '我是一个babel';
      this.msg = msg;
      return fn_babel;
    },
    longTimerFn() {
      for (let i = 0; i < 5000000; i++) {
        this.items.push(i);
      }
    },
    longTimerFnlongTimerFnlongTimerFn() {
      for (let i = 0; i < 5000000; i++) {
        this.items.push(i);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .logo {
    background: sandybrown;
  }
}
</style>
